<template>
	<view>


		<view class="wordVideo" v-if="!vanLoading">
			<!-- 标题 -->
			<view class="title marginPad">
				<span style='font-weight: bold;font-size: 18px;line-height: 25px;'>
					{{contentData.title}}
				</span>
			</view>
			<!-- 栏目，人员，时间，图标 -->
			<view class="peopleTime flexBetween marginPad">
				<view class="peopleLeft flexAlignCenter">
					<span style='display: inline-block;border: 1px solid #e4e4e4;
				padding: 2px 3px;font-size: 11px;color: #666;border-radius: 3px;'>{{contentData.columnName}}</span>

				</view>
				<view class="timeRight flexAlignCenter">
					<image src="../../static/peopleDetail.png" mode=""></image>
					<view style="margin-right: 7px;margin-left: 6px;">
						{{contentData.author}}
					</view>
					<view class="">
						{{contentData.releaseDate}}

					</view>
				</view>
			</view>
			<view style="margin-bottom: 10px;">
				<video id="myVideo" style="z-index=1" :src="videoUrl" @error="videoErrorCallback" controls @play='onPlay' @pause='onPause'
				 @loadedmetadata='onLoadedmetadata' :autoplay='true'></video>
			</view>
			<view class="contentWord marginPad">
				<view class="richText" v-html="contentData.content">
					{{contentData.content}}
				</view>
			</view>
			<view class="enclosure marginPad" v-for="(item,index) in contentData.fileVOList" :key='index'>
				<image src="../../static/fujian@2x.png" mode="" style='margin-right: 2px;vertical-align: middle;' v-if='item.fileType=="3"'></image>
				<span @click='onPdfView(item.url)' v-if='item.fileType=="3"'>{{item.name}}</span>
			</view>
			<!--  -->
			<view class="bonusPoints" v-if="transitionShow">
				<view class="studySuccess">
					<image src="../../static/studySuccess.png" mode=""></image>
					<view class="integralView">
						<view style="margin-bottom: 40px;">+ {{integral}} 积分</view>
						<view>
							<view class="keepLearning" @click="keepLearning">继续学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="loadingStyle flexCenterCenter" v-else>
			<!-- <LoadingStatus :status="vanLoading"></LoadingStatus> -->
			<!-- <van-loading size="24px" vertical>加载中...</van-loading> -->
			<view class="">
				<van-loading type="spinner" />
			</view>
			<view class="" style="color: #333; margin-left: 15px;">
				加载中...
			</view>
		</view>

	</view>
</template>

<script>
	import {
		appGet
	} from "../../api/home/index.js"
	import {
		addPoints
	} from "../../api/detail/index.js"
	export default {
		data() {
			return {
				wordTitle: '交通运输部办公厅印发公路安全生命防护等三项工程典型案例的通知',
				playTime: 0,
				player: '',
				pauseer: '',
				pauseTime: 0,
				transitionShow: false,
				rewardConditions: '',
				miss: '',
				showFlag: false,
				contentData: {},
				videoUrl: '',
				contentId: '',
				videoEndFlag: false,
				vanLoading: true,
				readFlag: false,
				// 是否阅读超过6篇
				readRestFlag: false,
				videoTime: 0,
				// 积分
				integral: 5
			}
		},

		onLoad(option) {
			this.contentId = option.id
			// console.log(option);
			this.readFlag = JSON.parse(option.read)
			this.readRestFlag = JSON.parse(option.readRest)
			if (this.readFlag != true && this.readRestFlag != true) {
				wx.enableAlertBeforeUnload({
					message: `再看一会儿就可以获得积分哦\n确认退出吗！`,
					success: function(res) {

					},
					fail: function(errMsg) {
						// console.log("方法注册失败：", errMsg);
					},
				});
			}

			//获取内容
			appGet({
				contentId: option.id,
				orgId: uni.getStorageSync('spaceData').orgId
			}).then(res => {
				// console.log(res);
				res.data.data.fileVOList.forEach(item => {
					if (item.fileType == '1') {
						this.videoUrl = item.url
						if (this.videoUrl.indexOf('https://fbzh-elearning.oss-cn-hangzhou.aliyuncs.com') != -1) {
							this.videoUrl = this.videoUrl.replace('https://fbzh-elearning.oss-cn-hangzhou.aliyuncs.com',
								'https://elearning-oss.zhinengjianshe.com');
						} else if (this.videoUrl.indexOf('https://lw-sit.oss-cn-beijing.aliyuncs.com') != -1) {

							this.videoUrl = this.videoUrl.replace('https://lw-sit.oss-cn-beijing.aliyuncs.com',
								'https://it-wage-oss.zhinengjianshe.com');
						}
					}

				})

				this.rewardConditions = res.data.data.rewardConditions
				this.integral = res.data.data.integral
				this.contentData = res.data.data

				this.vanLoading = false

			})
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		watch: {
			playTime(val, oldval) {
				this.playTime = val
				// console.log(this.playTime);
				if (this.readFlag != true && this.readRestFlag != true) {
					if (this.playTime < this.videoTime - 2) {
						// console.log(1111111);
						let queryData = {
							contentId: this.contentId,
							idNo: uni.getStorageSync('realName').idNo,
							orgId: uni.getStorageSync('spaceData').orgId,
							personId: uni.getStorageSync('spaceData').personId,
							projectId: uni.getStorageSync('spaceData').projectId
						}
						if ((this.playTime > this.rewardConditions && this.showFlag == false)) {
							// console.log(queryData);
							addPoints(queryData).then(res => {
								this.transitionShow = true
								this.videoContext.pause()
								wx.disableAlertBeforeUnload({})
							})
							this.showFlag = true

						}
					} else {
						// console.log(222222);
						if (this.showFlag == false) {
							// this.transitionShow = true
							addPoints({
								contentId: this.contentId,
								idNo: uni.getStorageSync('realName').idNo,
								orgId: uni.getStorageSync('spaceData').orgId,
								personId: uni.getStorageSync('spaceData').personId,
								projectId: uni.getStorageSync('spaceData').projectId
							}).then(res => {
								this.transitionShow = true
								this.videoContext.pause()
								wx.disableAlertBeforeUnload({})
							})
							this.showFlag = true

						}

					}


				}


			}
		},
		methods: {
			//视频错误信息回调
			videoErrorCallback: function(e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			onPlay() {
				// console.log('播放');
				this.player = setInterval(() => {
					this.playTime++
				}, 1000)
			},
			onPause() {
				// console.log('暂停');		
				clearInterval(this.player)

			},
			//获取视频时长
			onLoadedmetadata(event) {
				// console.log(event.detail.duration);
				this.videoTime = event.detail.duration
			},
			//继续学习
			keepLearning() {
				this.transitionShow = false
				this.videoContext.play()
			},
			//打开pdf
			onPdfView(url) {
				this.vanLoading = true
				if (url.indexOf('https://fbzh-elearning.oss-cn-hangzhou.aliyuncs.com') != -1) {
					url = url.replace('https://fbzh-elearning.oss-cn-hangzhou.aliyuncs.com',
						'https://elearning-oss.zhinengjianshe.com');
				} else if (url.indexOf('https://lw-sit.oss-cn-beijing.aliyuncs.com') != -1) {

					url = url.replace('https://lw-sit.oss-cn-beijing.aliyuncs.com', 'https://it-wage-oss.zhinengjianshe.com');
				}

				const src = `${url}`;
				// 判断操作系统
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform == "ios") {
							// iOS 可直接查看
							// console.log('苹果');
							// console.log(url);
							// this.url = src;
							this.vanLoading = false
							// this.iOSshow = false;

							uni.navigateTo({
								url: `../pdfView/pdfView?src=${url}`
							})
						} else {
							// Android 需要下载后、打开
							this.iOSshow = false;
							console.log(src);
							uni.downloadFile({
								url: src,
								success: (res) => {
									const path = res.tempFilePath;
									uni.openDocument({
										filePath: path,
										fileType: 'pdf',
										success: (res) => {
											console.log("打开成功！");
											this.vanLoading = false
										},
										fail: (err) => {
											uni.showToast({
												title: '打开文件失败',
												icon: 'none',
												duration: 2000
											});
											this.vanLoading = false
										}
									});
								},
								fail: (err) => {
									console.log(err);
									// this.err = err
									uni.showToast({
										title: '下载文件失败',
										icon: 'none',
										duration: 2000
									});
									this.vanLoading = false
								}
							});
						}
					}
				});




			},
		}
	}
</script>

<style scoped>
	.wordVideo {
		padding: 11px 0;
		/* border-bottom: 1px solid #f0f0f0; */
	}

	.marginPad {

		margin: 0 15px;
	}

	.title {
		font-size: 16px;
		line-height: 25px;
		margin-bottom: 14px;
	}

	.bottomRight {
		color: #666;
		font-size: 11px
	}

	.loadingStyle {
		width: 100%;
		height: calc(100vh - 90px);

	}

	.bottomLeft {
		color: #666;
		font-size: 12px
	}

	::v-deep video {
		width: 100%;
	}

	.peopleTime {
		font-size: 12px;
		color: #666666;
		margin-bottom: 15px;
	}

	.peopleLeft ::v-deep image {
		width: 12px;
		height: 12px;
	}

	.timeRight {
		line-height: 21px;
	}

	.timeRight ::v-deep image {
		width: 12px;
		height: 12px;
	}

	.contentWord {
		margin-bottom: 30px;
		/* font-size: 15px; */
		line-height: 25px;
	}

	.studySuccess ::v-deep image {
		width: 338px;
		height: 480px;
	}

	.bonusPoints {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);

		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.studySuccess {
		width: 338px;
		height: 480px;

		/* opacity: 1; */
		font-size: 35px;
		color: #f00;
		z-index: 99998;
		text-align: center;
		position: fixed;
		left: calc(50% - 169px);
		bottom: calc(50% - 180px);
		animation-name: example;
		animation-duration: 0.7s;
		/* position: relative; */
	}

	.integralView {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 300px;

	}

	.keepLearning {
		width: 140px;
		height: 34px;
		border-radius: 17px;
		background: #E8473E;
		color: #fff;
		font-size: 18px;
		line-height: 34px;
		letter-spacing: 3px;
		margin: 0 auto;
	}

	@keyframes example {
		0% {
			left: calc(50% - 169px);
			bottom: 0px;
		}

		/* 	// 25%  { left:calc(50% - 169px); bottom: 20px;}
		50% {
			left: calc(50% - 169px);
			bottom: 100px;
		} */

		// 75%  { left:calc(50% - 169px); bottom: 100px;}
		100% {
			left: calc(50% - 169px);
			bottom: calc(50% - 180px);
		}
	}

	.enclosure {
		color: #1890FF;
	}

	.enclosure ::v-deep image {
		width: 12px;
		height: 18.5px;
	}
</style>
